<template>
  <div id="app" v-bind:style="appStyle">
    <div id="carettab" style="font-size: 75vw;">
      <div class="middle">
        <div class="center">
          <div id="time" v-show="showClock1">{{ timeStr }}</div>
          <div id="date" v-show="showDate">{{ dateStr }}</div>
        </div>
      </div>
      <div class="bottom">
        <div id="additional-clocks">
          <div class="clock" v-show="showClock2">
            <div class="time">{{ timeStr2 }}</div>
            <span class="label">{{ label2 }}</span>
          </div>
          <div class="clock" v-show="showClock3">
            <div class="time">{{ timeStr3 }}</div>
            <span class="label">{{ label3 }}</span>
          </div>
          <div class="clock" v-show="showClock4">
            <div class="time">{{ timeStr4 }}</div>
            <span class="label">{{ label4 }}</span>
          </div>
        </div>
      </div>
    </div>
    <div id="config">
      <tabs>
        <tab label="颜色" active="true" tab-id="config-color">
          <config-title-row title="自定义颜色" />
          <div class="row">
            <div class="label">
              <span>背景颜色</span>
              <small>页面背景的颜色。</small>
            </div>
            <div class="input">
              <input id="set-background" type="color" v-model="backgroundColor">
            </div>
            <div class="input input-text short">
              <input id="set-background-value" v-model="backgroundColor" type="text">
            </div>
          </div>
          <div class="row">
            <div class="label">
              <span>前景颜色</span>
              <small>字体和图标的颜色。</small>
            </div>
            <div class="input">
              <input id="set-foreground" type="color" v-model="foregroundColor">
            </div>
            <div class="input input-text short">
              <input id="set-foreground-value" v-model="foregroundColor" type="text">
            </div>
          </div>
        </tab>

        <tab label="时间" tab-id="config-time">
          <config-title-row title="主时钟" />

          <config-toggle-row
            input-id="set-clock1"
            text-on="ON"
            text-off="OFF"
            title="主时钟"
            desc="在页面中央显示主时钟。"
            preview="<b>12:00:00 AM</b>"
            v-model="showClock1" />

          <config-toggle-row
            input-id="set-seconds"
            text-on="ON"
            text-off="OFF"
            title="秒数"
            desc="显示主时钟的秒数。"
            preview="12:00<b>:00</b> AM"
            v-model="showSeconds" />

          <config-toggle-row
            input-id="set-meridiem"
            text-on="ON"
            text-off="OFF"
            title="上午/下午"
            desc="在主时钟显示上午/下午。"
            preview="12:00:00 <b>AM</b>"
            v-model="showMeridiem" />

          <config-toggle-row
            input-id="set-military"
            text-on="ON"
            text-off="OFF"
            title="二十四小时制"
            desc="使用二十四小时制。"
            preview="<b>24</b>:00:00"
            v-model="showMilitary" />

          <config-toggle-row
            input-id="set-delimiter"
            text-on="ON"
            text-off="OFF"
            title="分隔符"
            desc="在所有时钟的时间之间显示分隔符。"
            preview="12<b>:</b>00<b>:</b>00 AM"
            v-model="showDelimiter" />

          <div class="row">
            <div class="label">
              <span>时区</span>
              <small>选择主时钟的时区（默认为您的本地时区）。</small>
            </div>
            <div class="input input-select">
              <select id="set-time1-zone" class="timezones" v-model="timezone1">
                <option v-for="(text, value) in timezones" v-bind:value="value" v-bind:key="value">{{ text }}</option>
              </select>
            </div>
          </div>

          <config-title-row title="附加时钟" />

          <config-toggle-row
            input-id="set-time2"
            text-on="ON"
            text-off="OFF"
            title="第二个时钟"
            desc="在主时钟下面显示一个额外的时钟。"
            preview="&nbsp;"
            v-model="showClock2" />

          <div id="clock2-timezone" class="row" v-show="showClock2">
            <div class="label">
              <span>第二个时钟的时区</span>
              <small>选择这个时钟的时区。</small>
            </div>
            <div class="input input-select">
              <select id="set-time2-zone" class="timezones" v-model="timezone2">
                <option v-for="(text, value) in timezones" v-bind:value="value" v-bind:key="value">{{ text }}</option>
              </select>
            </div>
          </div>

          <div id="clock2-label" class="row" v-show="showClock2">
            <div class="label">
              <span>第二个时钟的标签</span>
              <small>输入这个时钟的标签（如果没有请留空）。</small>
            </div>
            <div class="input input-text">
              <input id="set-time2-label" type="text" v-model="label2">
            </div>
          </div>

          <config-toggle-row
            input-id="set-time3"
            text-on="ON"
            text-off="OFF"
            title="第三个时钟"
            desc="在主时钟下面显示一个额外的时钟。"
            preview="&nbsp;"
            v-model="showClock3" />

          <div id="clock3-timezone" class="row" v-show="showClock3">
            <div class="label">
              <span>第三个时钟的时区</span>
              <small>选择这个时钟的时区。</small>
            </div>
            <div class="input input-select">
              <select id="set-time3-zone" class="timezones" v-model="timezone3">
                <option v-for="(text, value) in timezones" v-bind:value="value" v-bind:key="value">{{ text }}</option>
              </select>
            </div>
          </div>

          <div id="clock3-label" class="row" v-show="showClock3">
            <div class="label">
              <span>第三个时钟的标签</span>
              <small>输入这个时钟的标签（如果没有请留空）。</small>
            </div>
            <div class="input input-text">
              <input id="set-time3-label" type="text" v-model="label3">
            </div>
          </div>

          <config-toggle-row
            input-id="set-time4"
            text-on="ON"
            text-off="OFF"
            title="第四个时钟"
            desc="在主时钟下面显示一个额外的时钟。"
            preview="&nbsp;"
            v-model="showClock4" />

          <div id="clock3-timezone" class="row" v-show="showClock4">
            <div class="label">
              <span>第四个时钟的时区</span>
              <small>选择这个时钟的时区。</small>
            </div>
            <div class="input input-select">
              <select id="set-time4-zone" class="timezones" v-model="timezone4">
                <option v-for="(text, value) in timezones" v-bind:value="value" v-bind:key="value">{{ text }}</option>
              </select>
            </div>
          </div>

          <div id="clock4-label" class="row" v-show="showClock4">
            <div class="label">
              <span>第四个时钟的标签</span>
              <small>输入这个时钟的标签（如果没有请留空）。</small>
            </div>
            <div class="input input-text">
              <input id="set-time4-label" type="text" v-model="label4">
            </div>
          </div>

        </tab>

        <tab label="日期" tab-id="config-date">
          <config-title-row title="日期" />

          <config-toggle-row
            input-id="set-date"
            text-on="ON"
            text-off="OFF"
            title="日期"
            desc="在页面中央显示日期。"
            preview="<b>Monday, January 1, 2017</b>"
            v-model="showDate" />

          <config-toggle-row
            input-id="set-day"
            text-on="ON"
            text-off="OFF"
            title="星期"
            desc="显示星期（仅当“简化”关闭时适用）。"
            preview="<b>Monday,</b> January 1, 2017"
            v-model="showWeekend" />

          <config-toggle-row
            input-id="set-year"
            text-on="ON"
            text-off="OFF"
            title="年份"
            desc="在日期中显示年份。"
            preview="Monday, January 1, <b>2017</b>"
            v-model="showYear" />

          <config-toggle-row
            input-id="set-shortdate"
            text-on="ON"
            text-off="OFF"
            title="简化"
            desc="显示日期的简化形式。"
            preview="<b>01/31/2016</b>"
            v-model="showShortdate" />

          <div class="row date-delimiter">
            <div class="label">
              <span>简化日期的分隔符</span>
              <small>显示在简化日期数字之间的分隔符。</small>
            </div>
            <div class="input">
              <input name="set-date-delimiter" id="set-date-delimiter-slash" value="slash" class="toggle toggle-yes-no" type="radio" checked="Checked" v-model="dateDelimiter">
              <label for="set-date-delimiter-slash" data-on="/" data-off="/" class="sm date-delimiter-toggle"></label>
            </div>
            <div class="input">
              <input name="set-date-delimiter" id="set-date-delimiter-period" value="period" class="toggle toggle-yes-no" type="radio" v-model="dateDelimiter">
              <label for="set-date-delimiter-period" data-on="." data-off="." class="sm date-delimiter-toggle"></label>
            </div>
            <div class="input">
              <input name="set-date-delimiter" id="set-date-delimiter-dash" value="dash" class="toggle toggle-yes-no" type="radio" v-model="dateDelimiter">
              <label for="set-date-delimiter-dash" data-on="-" data-off="-" class="sm date-delimiter-toggle"></label>
            </div>
            <div class="input">
              <input name="set-date-delimiter" id="set-date-delimiter-space" value="space" class="toggle toggle-yes-no" type="radio" v-model="dateDelimiter">
              <label for="set-date-delimiter-space" data-on=" " data-off=" " class="sm date-delimiter-toggle"></label>
            </div>
          </div>

          <div class="row">
            <div class="label">
              <span>日期格式</span>
              <small>决定日期的显示方式。</small>
            </div>
            <div class="input input-select">
              <select id="set-dateformat" name="set-dateformat" v-model="dateformat">
                <option value="middle">Middle-Endian (January 31, 2000) (01/31/00)</option>
                <option value="little">Little-Endian (31 January 2000) (31/01/00)</option>
                <option value="big">Big-Endian (2000 January 31) (00/01/31)</option>
              </select>
            </div>
          </div>
        </tab>
      </tabs>
    </div>
  </div>
</template>

<script>
import moment from 'moment-timezone'
import ConfigTitleRow from './components/ConfigTitleRow'
import ConfigToggleRow from './components/ConfigToggleRow'
import Tabs from './components/Tabs'
import Tab from './components/Tab'

export default {
  name: 'app',
  components: {
    ConfigTitleRow,
    ConfigToggleRow,
    Tabs,
    Tab
  },
  data () {
    return {
      time: Date.now(),
      locale: 'zh-cn',
      backgroundColor: '#FFFFFF',
      foregroundColor: '#000000',
      showClock1: true,
      showDigial: true,
      showSeconds: true,
      showMeridiem: true,
      showMilitary: false,
      showDelimiter: true,
      showDate: true,
      showWeekend: true,
      showYear: true,
      showShortdate: false,
      dateDelimiter: 'slash',
      dateformat: 'middle',
      timezone1: '',
      showClock2: false,
      timezone2: '',
      label2: '',
      showClock3: false,
      timezone3: '',
      label3: '',
      showClock4: false,
      timezone4: '',
      label4: '',
      timezones: {
        'Pacific/Midway': '(GMT -11:00) Midway Island, Samoa',
        'Pacific/Honolulu': '(GMT -10:00) Hawaii',
        'America/Anchorage': '(GMT -9:00) Alaska',
        'America/Los_Angeles': '(GMT -8:00) Pacific Time (US & Canada)',
        'America/Boise': '(GMT -7:00) Mountain Time (US & Canada)',
        'America/Phoenix': '(GMT -7:00) Mountain Standard Time (US & Canada), America/Phoenix',
        'America/Chicago': '(GMT -6:00) Central Time (US & Canada), Mexico City',
        'America/Belize': '(GMT -6:00) Central Standard Time (America), Belize, Costa Rica',
        'America/New_York': '(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima',
        'Atlantic/Bermuda': '(GMT -4:00) Atlantic Time (Canada), Canada/Atlantic',
        'Canada/Newfoundland': '(GMT -3:30) Newfoundland',
        'America/Argentina/Buenos_Aires': '(GMT -3:00) Brazil, Buenos Aires, Georgetown',
        'Atlantic/South_Georgia': '(GMT -2:00) Mid-Atlantic',
        'Atlantic/Azores': '(GMT -1:00 hour) Azores, Cape Verde Islands',
        'Europe/London': '(GMT) Western Europe Time, London, Lisbon, Casablanca',
        'Europe/Paris': '(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris',
        'Europe/Kaliningrad': '(GMT +2:00) Kaliningrad, South Africa',
        'Asia/Baghdad': '(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg',
        'Asia/Tehran': '(GMT +3:30) Tehran',
        'Asia/Muscat': '(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi',
        'Asia/Kabul': '(GMT +4:30) Kabul',
        'Asia/Karachi': '(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent',
        'Asia/Calcutta': '(GMT +5:30) Bombay, Calcutta, Madras, New Delhi',
        'Asia/Kathmandu': '(GMT +5:45) Kathmandu',
        'Asia/Almaty': '(GMT +6:00) Almaty, Dhaka, Colombo',
        'Asia/Bangkok': '(GMT +7:00) Bangkok, Hanoi, Jakarta',
        'Asia/Hong_Kong': '(GMT +8:00) Beijing, Perth, Singapore, Hong Kong',
        'Asia/Tokyo': '(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk',
        'Australia/Adelaide': '(GMT +9:30) Adelaide, Darwin',
        'Pacific/Guam': '(GMT +10:00) Eastern Australia, Guam, Vladivostok',
        'Asia/Magadan': '(GMT +11:00) Magadan, Solomon Islands, New Caledonia',
        'Pacific/Auckland': '(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka'
      }
    }
  },
  computed: {
    appStyle () {
      return {
        'background-color': this.backgroundColor,
        'color': this.foregroundColor
      };
    },
    timeStr () {
      var momentTime = moment(this.time);
      if (this.timezone1) {
        momentTime = momentTime.tz(this.timezone1);
      }
      var timeFormat = this.showMilitary ? 'HH:mm' : 'h:mm';
      timeFormat += this.showSeconds ? ':ss' : '';
      var timeStr = momentTime.locale(this.locale).format(timeFormat);
      timeStr += !this.showMilitary && this.showMeridiem ? momentTime.locale('en').format(' a') : '';
      timeStr = this.showDelimiter ? timeStr : timeStr.replace(/[:]/g, ' ');
      return timeStr;
    },
    timeStr2 () {
      var momentTime = moment(this.time);
      if (this.timezone2) {
        momentTime = momentTime.tz(this.timezone2);
      }
      var timeFormat = this.showMilitary ? 'HH:mm' : 'h:mm';
      var timeStr = momentTime.locale(this.locale).format(timeFormat);
      timeStr += !this.showMilitary && this.showMeridiem ? momentTime.locale('en').format(' a') : '';
      timeStr = this.showDelimiter ? timeStr : timeStr.replace(/[:]/g, ' ');
      return timeStr;
    },
    timeStr3 () {
      var momentTime = moment(this.time);
      if (this.timezone3) {
        momentTime = momentTime.tz(this.timezone3);
      }
      var timeFormat = this.showMilitary ? 'HH:mm' : 'h:mm';
      var timeStr = momentTime.locale(this.locale).format(timeFormat);
      timeStr += !this.showMilitary && this.showMeridiem ? momentTime.locale('en').format(' a') : '';
      timeStr = this.showDelimiter ? timeStr : timeStr.replace(/[:]/g, ' ');
      return timeStr;
    },
    timeStr4 () {
      var momentTime = moment(this.time);
      if (this.timezone4) {
        momentTime = momentTime.tz(this.timezone4);
      }
      var timeFormat = this.showMilitary ? 'HH:mm' : 'h:mm';
      var timeStr = momentTime.locale(this.locale).format(timeFormat);
      timeStr += !this.showMilitary && this.showMeridiem ? momentTime.locale('en').format(' a') : '';
      timeStr = this.showDelimiter ? timeStr : timeStr.replace(/[:]/g, ' ');
      return timeStr;
    },
    dateStr () {
      var momentTime = moment(this.time);
      if (this.timezone1) {
        momentTime = momentTime.tz(this.timezone1);
      }
      var dateFormat = this.showWeekend ? 'dddd,' : '';
      if (this.showShortdate) {
        var delimiters = {
          slash: '/',
          period: '.',
          dash: '-',
          space: ' '
        };
        var delimiter = delimiters[this.dateDelimiter];
        switch (this.dateformat) {
          case 'middle':
            dateFormat += ['MM', 'DD', 'YY'].join(delimiter);
            break;
          case 'little':
            dateFormat += ['DD', 'MM', 'YY'].join(delimiter);
            break;
          case 'big':
            dateFormat += ['YY', 'MM', 'DD'].join(delimiter);
            break;
        }
      } else {
        dateFormat += 'MMMM D';
        dateFormat += this.showYear ? ', YYYY' : '';
      }

      var dateStr = momentTime.locale(this.locale).format(dateFormat);
      return dateStr;
    }
  },
  created () {
    setInterval(() => {
      this.time = Date.now();
    }, 1000);
  }
}
</script>

<style>
html {
  font-size: 10px;
}
* {
  box-sizing: border-box;
}
body {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.6rem;
  color: #000;
}
body.font-exo-2 {
  font-family: 'Exo 2', cursive;
}
#app {
  display: flex;
}
#carettab {
  flex: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 100vw;
}
.top, .middle, .bottom {
  display: flex;
  align-items: center;
}
.middle {
  display: flex;
  justify-content: center;
}
.left, .right, .center {
  display: flex;
  align-items: center;
}
.center {
  justify-content: center;
  flex-direction: column;
}
#time {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 10%;
  font-weight: 300;
  line-height: 1;
}
#date {
  font-size: 3.0%;
}
#additional-clocks {
  display: flex;
  justify-content: center;
  align-content: flex-start;
  text-align: center;
  padding: 20px 0 0 0;
}
#additional-clocks .clock {
  display: block;
  padding: 0 50px;
}
#additional-clocks .time {
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
  line-height: 1;
}
#additional-clocks .label {
  display: block;
  font-size: 1.3%;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.3em;
}
#config {
  width: 500px;
  height: 100vh;
  background-color: #202020;
  color: #FAFAFA;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  border-left: 2px groove #333;
}
#config nav {
  background-color: #000;
  border-bottom: 2px groove rgba(255, 255, 255, 0.175);
}
#config nav ul {
  margin: 0;
  padding: 0 5px;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
#config nav ul li {
  padding: 0;
}
#config nav ul li button {
  display: inline-block;
  line-height: 40px;
  padding: 0 5px;
  margin: 0 5px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #adb8b8;
  text-decoration: none;
  cursor: pointer;
}
#config nav ul li button.active {
  border-bottom-color: #3Fa9F5;
  color: #FAFAFA;
}
.section {
  display: none;
  padding: 20px 0;
  height: calc(100vh - 42px);
  overflow-y: auto;
}
.section.active {
  display: block;
}
.row {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 17px;
  padding:0 10px 0 0;
}
.section h2 {
  margin: 0;
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px;
  flex-grow: 1;
}
.row .input {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  height: 70px;
  padding: 0 0 0 10px;
}
.row .input-select {
  width: 50%;
}
.row .input-select select {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  padding: 0 5px;
  font-size: 16px;
  color: white;
  background: #000;
}
.row .input-text {
  width: 50%;
}
.row .input-text input[type="text"]{
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  padding: 1 5px;
  font-size: 16px;
  color: white;
  background: #000;
}
.row .label {
  padding: 0 10px;
  flex-grow: 1;
}
.row .label small {
  display: block;
  font-size: 70%;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.5
}
.row .preview {
  font-size: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}
.row .preview b {
  font-weight: 700;
  color: rgba(63, 169, 245, 0.8);
}
.row .input-text {
  width: 50%;
}
.toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
input.toggle-yes-no+label,
label.standalone {
  flex-shrink: 0;
  width: 65px;
  height: 34px;
}
.toggle+label,
label.standalone {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  height: 100%;
}
input.toggle-yes-no+label:before,
input.toggle-yes-no+label:after,
label.standalone:before,
label.standalone:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 34px;
}
input.toggle-yes-no+label:before,
label.standalone:before {
  background-color: #788;
  content: attr(data-off);
  transition: transform 0.5s;
  backface-visibility: hidden;
}
input.toggle-yes-no+label:after,
label.standalone:after {
  background-color: #5CB85C;
  content: attr(data-on);
  transition: transform 0.5s;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
input.toggle-yes-no:checked+label:before,
label.standalone:before {
  transform: rotateY(180deg);
}
input.toggle-yes-no:checked+label:after,
label.standalone:after {
  transform: rotateY(0);
}
input.toggle-yes-no+label.sm {
  width: 34px;
}
input[type="color"] {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
}
.input-text.short {
  width: 25%;
}
</style>
